<template>
  <div class="app">
    <div class="tree-examples">
      <!-- 普通单击选择示例 -->
      <div class="tree-item">
        <h3>普通单击选择</h3>
        <custom-tree
          :default-props="defaultProps"
          :node-key="'id'"
          @node-click="handleNodeClick"
        />
      </div>
      
      <!-- 单选按钮示例 -->
      <div class="tree-item">
        <h3>单选按钮</h3>
        <custom-tree
          :tree-data="treeData"
          :default-props="defaultProps"
          :node-key="'id'"
          :show-radio="true"
          :default-radio-value="2"
          @radio-change="handleRadioChange"
        />
      </div>
      
      <!-- 多选示例 -->
      <div class="tree-item">
        <h3>多选</h3>
        <custom-tree
          :tree-data="treeData"
          :default-props="defaultProps"
          :node-key="'id'"
          :multiple="true"
          :default-checked-keys="[2, 3]"
          @check="handleCheck"
        />
      </div>
      
      <!-- 带过滤功能示例 -->
      <div class="tree-item">
        <h3>过滤功能</h3>
        <custom-tree
          :tree-data="treeData"
          :default-props="defaultProps"
          :node-key="'id'"
          :filterable="true"
          :filter-placeholder="'请输入关键字'"
          :custom-filter-node="customFilterNode"
          @node-click="handleNodeClick"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CustomTree from '@/components/Tree/CustomTree.vue'

export default {
  name: 'App',
  components: {
    CustomTree
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点',
          type: 'folder',
          children: [
            {
              id: 2,
              label: '二级节点 1',
              type: 'folder'
            },
            {
              id: 3,
              label: '二级节点 2',
              type: 'file'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 普通节点点击
    handleNodeClick(data) {
      console.log('节点被点击：', data)
    },
    
    // 单选按钮变化
    handleRadioChange(data) {
      console.log('单选值变化：', data)
    },
    
    // 多选框选中
    handleCheck({ checkedKeys, checkedNodes }) {
      console.log('选中的节点keys：', checkedKeys)
      console.log('选中的节点：', checkedNodes)
    },
    
    // 自定义过滤方法
    customFilterNode(value, data) {
      if (!value) return true
      
      const searchValue = value.toString().toLowerCase()
      const label = (data.label || '').toString().toLowerCase()
      const type = (data.type || '').toString().toLowerCase()
      
      return label.includes(searchValue) || type.includes(searchValue)
    }
  }
}
</script>

<style>
.tree-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.tree-item {
  flex: 1;
  min-width: 300px;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.tree-item h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #606266;
}
</style> 